<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Hello React</title>
</head>
<body>

  <div id="root"></div>

  <script src="../lib/react.js"></script>
  <script src="../lib/react-dom.js"></script>
  <script src="../lib/babel.js"></script>
  
  <script type="text/babel">
    class App extends React.Component {
      constructor() {
        super()
        this.state = {
          message: "hello world",
          names: ['1','2','3'],
          aaa: undefined,
          bbb: null,
          ccc: true,
          person: {
            name: '张三'
          },
          firstName: '111',
          lastName: '2222',
          age: 18,
          movies: ['千年女优','红辣椒']
        }
      }
      render() {
        const { message, names, aaa, bbb, ccc, person } = this.state
        
        const { firstName, lastName } = this.state
        const fullName = firstName + lastName

        const { age } = this.state
        const ageText = age >= 18 ? '成年人' : '未成年人'

        const { movies } = this.state
        const moviesEls = movies.map(movie => <li>{movie}</li>)
        return (
          <div>
            {/* 1. Number/String/Array直接显示 */}
            <h2>{ message }</h2>
            <h2>{ names }</h2>

            {/* 2.undefined/null/Boolean不显示也不报错 */}
            <h2>{ aaa }</h2>
            <h2>{ bbb }</h2>
            <h2>{ ccc }</h2>

            {/* 3.Object不能作为子元素显示 */}
            {/*<h2>{ person }</h2>*/}
            <h2>{ Object.keys(person)[0] }</h2>

            {/* 4.可以插入表达式 */}
            <h2>{ firstName + lastName }</h2>
            <h2>{ fullName }</h2>

            {/* 5.可以插入三元表达式 */}
            <h2>{ age > 18 ? '成年人' : '未成年人' }</h2>
            <h2>{ ageText }</h2>

            {/* 6.可以插入方法展示结果 */}
            <h2>{ movies.map(movie => <li>{movie}</li>) }</h2>
            <h2>{ moviesEls }</h2>
            <h2>{ this.getMovieEls() }</h2>
          </div>
        )
      }

      getMovieEls() {
        const { movies } = this.state
        const moviesEls = movies.map(movie => <li>{movie}</li>)
        return moviesEls
      }
    }
    const root = ReactDOM.createRoot(document.querySelector("#root"))
    root.render(<App />)
  </script>
</body>
</html>